<template>
  <div class="defaultLayout" @click="showCard = false">
    <flex-header />
    <div class="contentLayout">
      <Nuxt />
    </div>
    <flex-footer />
    <flex-float-window />
    <flex-float-talk :showCard.sync="showCard" />
  </div>
</template>

<script>
import FlexHeader from '@/components/FlexHeader.vue'
import FlexFooter from '@/components/FlexFooter.vue'
import FlexFloatWindow from '@/components/FlexFloatWindow.vue'
import FlexFloatTalk from '@/components/FlexFloatTalk.vue'
import { mapMutations,mapState } from 'vuex'

export default {
  data(){
    return{
      msg_data: [],
      showCard: false
    }
  },
  components: {
    FlexHeader,
    FlexFooter,
    FlexFloatWindow,
    FlexFloatTalk
  }, 
  destroyed :function() {
  this.websocketclose();
  },
  computed:{
    ...mapState({
      account:state=>state.account.account
    })
  },
  methods: {
    ...mapMutations({
      setAccount: 'account/setAccount',
      setSignIn: 'account/setSignIn',
      needUpdate:'needUpdate'
    }),
    initWebSocket: function () {
        this.websock = new WebSocket("ws://192.168.31.68:80/websocket");
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onclose = this.websocketclose;
      },
      websocketonopen: function () {
        console.log("WebSocket连接成功");
        this.send()
      },
      websocketonerror: function (e) {
        console.log("WebSocket连接发生错误");
      },
      websocketonmessage: function (e) {
        var da = e.data;
        this.openNotification('OK','有来自客服的新消息','快查看一下吧!')
        this.needUpdate()  
        console.log(da);
        this.msg_data.unshift(da);
      },
      websocketclose: function (e) {
        console.log("connection closed ");
      },
      send: function(){
        this.websock.send(this.account.username);
      },
      openNotification(type,title,msg) {
      let iconType = ''
      let iconColor = ''
      if(type=='OK'){
        iconType = 'smile'
        iconColor = '#52c41a'
      }
      else
      {
        iconType = 'frown'
        iconColor = '#eb2f96'
      }
      this.$notification.open({
        message: title,
        description: msg,
        icon: h => h('a-icon', {
          props: {
            type: iconType,
            theme: 'twoTone',
            'two-tone-color': iconColor
          }
        }),
       
      });
    }

    
  },
  created() {
    let account = JSON.parse(localStorage.getItem('account'))
    if(account !== null && account !== undefined) {
      this.setSignIn(true)
      this.setAccount(account)
    }
    this.initWebSocket()
  }
}
</script>

<style>
html {
  font-family:
    'Source Sans Pro',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: content-box;
}

*,
*::before,
*::after {
  box-sizing: content-box;
  margin: 0;
}

.contentLayout {
  float: left;
  width: 100%;
  margin-top: 80px;
  min-height: calc(100vh - 180px);
}

a, a:hover {
  color: initial;
}
</style>
